<template>
  <a-card :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <a-form-model ref="form" :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        label="账户类型"
        prop="level"
      >
        <a-select v-model="form.level" >
          <a-select-option value="1">
            账户管家
          </a-select-option>
          <a-select-option value="2">
            子账户
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="顶级账户"
        prop="pid"
        v-if="form.level == 2"
      >
        <a-select v-model="form.pid">
          <a-select-option :value="item.id" v-for="(item,index) in list" :key="index">
            {{item.account}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="账户名"
        prop="account"
      >
        <a-input v-model="form.account" placeholder="请填写用户名" autocomplete="off" v-if="form.level != 2" />
        <a-select
          mode="tags"
          size="default"
          placeholder="请填写用户名"
          dropdownClassName="account_dropdown"
          @change="accountChange"
          v-else
        >
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="账户ID"
        prop="ucid"
        v-if="form.level == 2"
      >
        <a-input v-model="form.ucid" placeholder="请填ucid" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="密码"
        prop="password"
        v-if="form.level == 1"
      >
        <a-input-password v-model="form.password" placeholder="请填写密码" autocomplete="new-password"/>
      </a-form-model-item>
      <a-form-model-item
        label="token"
        prop="token"
        v-if="form.level == 1"
      >
        <a-input v-model="form.token" placeholder="请填写token" autocomplete="new-password"/>
      </a-form-model-item>
      <a-form-model-item
        label="类型"
        prop="type"
        v-if="form.level == 2"
      >
        <a-select v-model="form.type" allowClear>
          <a-select-option :value="1">商品</a-select-option>
          <a-select-option :value="2">直播</a-select-option>
          <a-select-option :value="3">信息流</a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 新增主推产品选择 -->
      <a-form-model-item
        label="主推产品"
        v-if="form.level == 2"
      >
        <a-select v-model="form.main_product">
          <a-select-option :value="item.value" v-for="(item,index) in mainProductList" :key="index">
            {{item.label}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 新增 品类、货品名、百家号昵称、优化师 -->
      <a-form-model-item
        label="品类"
        prop="category"
        v-if="form.level == 2"
      >
        <a-input v-model="form.category" placeholder="请填写品类" />
      </a-form-model-item>
      <a-form-model-item
        label="货品名"
        prop="product_name"
        v-if="form.level == 2"
      >
        <a-input v-model="form.product_name" placeholder="请填写货品名" />
      </a-form-model-item>
      <a-form-model-item
        label="百家号昵称"
        prop="bdname"
        v-if="form.level == 2"
      >
        <a-input v-model="form.bdname" placeholder="请填写百家号昵称" />
      </a-form-model-item>
      <a-form-model-item
        label="优化师ID"
        prop="admin_userid"
        v-if="form.level == 2"
      >
        <a-select v-model="form.admin_userid" allowClear>
          <a-select-option :value="item.id" v-for="(item,index) in youhuashi" :key="index">
            {{item.username}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 新增 品类、货品名、百家号昵称、优化师 -->
      
      <a-form-model-item
        label="备注"
      >
        <a-textarea v-model="form.remark" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="btn_wrapperCol">
        <a-button type="primary" @click="onSubmit" :loading='loading'>
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import {getBdAccountList,addBdAccount,getOptimizerList,mainProduct} from '@/api/xinxiliu/account'
// import {addUser,editUser} from '@/api/modules/setting'
export default {
  name: 'accountAdd',
  i18n: require('./i18n'),
  props:{
    mod:{
      type:String,
    },
    id:{
      type:[String,Number]
    }
  },
  data () {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      loading:false,
      form:{
        level:'',
        pid:'',
        token:'',
        account:'',
        password:'',
        remark:'',
        category:'',
        product_name:'',
        bdname:'',
        admin_userid:'',
        type:'',
        ucid: '',
        main_product: '',
      },
      list:[], // 顶级账户列表
      youhuashi: [], // 优化师列表
      mainProductList: [], //主推产品列表
      typeName:'',
      rules:{
        level:[
          {required: true,message: '请选择账号类型', trigger: 'blur'}
        ],
        pid:[
          {required: true,message: '请选择顶级账号', trigger: 'blur'}
        ],
        account:[
          {required: true,message: '请填写用户名', trigger: 'blur'}
        ],
        password:[
          {required: true,message: '请填写密码', trigger: 'blur'}
        ],
        token:[
          {required: true,message: '请填写token', trigger: 'blur'}
        ],
        status:[
          {required: true,message: '请选择状态', trigger: 'blur'}
        ],
        type:[
          {required: true,message: '请选择类型', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.getList()
    this.getOptimizerList()
    this.getMainProduct()
    // if(this.id != 0){
    // }
  },
  mounted() {
    this.changeLayout()
    this.$EventBus.$on('onresize', this.changeLayout)
  },
  methods: {
    getList(){
      const _this = this;
      getBdAccountList({}).then((res) => {
        _this.list = res.data.filter(e=>e.pid == 0)
        console.log(_this.list);
      });
    },
    getMainProduct() {
      // 获取主推产品
      mainProduct({}).then((res) => {
        if (res.errcode == 0) {
          this.mainProductList = res.data
        }
      }).catch(() => {
        
      });
    },
    getOptimizerList(){
      // 获取优化师列表
      getOptimizerList({}).then((res) => {
        console.log(res)
        if(res.errcode == 0){
          this.youhuashi = res.data
        }
      });
    },
    onSubmit(){
      const _this = this;
      this.$refs.form.validate((valid)=>{
        if(valid){
          let form = JSON.parse(JSON.stringify(this.form))
          if(form.admin_userid == undefined || form.admin_userid == ""){
            form.admin_userid = 0
          }
          this.loading = true;
          addBdAccount(form).then((res) => {
            this.loading = false;
            if(res.errcode == 0){
              _this.$message.success('添加成功')
              _this.back()
            }else{
              _this.$message.error(res.errmsg)
            }
          });
        }
      })
      // if(this.id != 0){
      //   this.form.id = this.id
      // }
      // this.loading = true;
      // if(this.id == 0){
      //   addUser(this.form).then(() => {
      //     this.loading = false;
      //     this.$message.success('新增成功')
      //     this.back()
      //   }).catch(()=>{
      //     this.$message.error('新增失败')
      //     this.loading = false;
      //   });
      // }else{
      //   editUser(this.form).then(() => {
      //     this.loading = false;
      //     this.$message.success('修改成功')
      //     this.back()
      //   }).catch(() => {
      //     this.$message.error('修改失败')
      //     this.loading = false;
      //   });
      // }
    },
    accountChange(e){
      this.form.account = e.join(',')
    },
    back(){
      this.$emit('update:mod','normal')
    },
    changeLayout() {
      let e = window.innerWidth
      if(e<=750){
        this.layout = 'vertical'
        this.labelCol = {}
        this.wrapperCol = {}
        this.btn_wrapperCol = {}
      }else{
        this.layout = 'horizontal'
        this.labelCol = {span: 7}
        this.wrapperCol = {span: 13}
        this.btn_wrapperCol = { span: 13, offset: 7 }
      }
    },
  },
  watch:{
    'form.level'(){
      this.form.account = ""
      this.$refs.form.clearValidate()
    },
  },
  computed: {
    desc() {
      return this.$t('pageDesc')
    },
    formItemLayout() {
      const layout  = this.layout;
      return layout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
  }
}
</script>

<style>
.account_dropdown{
  display: none !important;
}
</style>
